<template>
	<up-tabbar :value="activePath" @change="" :fixed="true" :placeholder="false" activeColor="#d81e06"
		:safeAreaInsetBottom="false">
		<template v-for="item in routes">
			<up-tabbar-item @click="goPath(item.pagePath)" :text="$t(item.text)"  v-if="item.iconName" :key="item.pagePath" :name="item.pagePath" :icon="item.iconName">
			</up-tabbar-item>
			<up-tabbar-item @click="goPath(item.pagePath)" :text="$t(item.text)"  v-else :key="item.pagePath" :name="item.pagePath">
				<template #active-icon>
					<image class="u-page__item__slot-icon" :src="item.selectedIconPath">
					</image>
				</template>
				<template #inactive-icon>
					<image class="u-page__item__slot-icon" :src="item.iconPath"></image>
				</template>
			</up-tabbar-item>
		</template>
		
	</up-tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const routes = ref([{
			"pagePath": "/pages/index/index",
			"text": "Home",
			"iconPath": "/static/publish.png",
			"selectedIconPath": "/static/select-publish.png"
		},
		{
			"pagePath": "/pages/findhouse/findhouse",
			"text": "Find",
			"iconName":"photo"
		},
		{
			"pagePath": "/pages/publish/publish",
			"text": "Publish",
			"iconPath": "/static/publish.png",
			"selectedIconPath": "/static/select-publish.png"
		},
		{
			"pagePath": "/pages/my/my",
			"text": "my",
			"iconName": 'account'
		}
	])
	const activePath = ref('/pages/index/index')
	const goPath = (pagePath) => {
		console.log(pagePath)
		activePath.value = pagePath
		uni.navigateTo({
			url: pagePath
		})
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
</style>